<template>
  <div>
    <side-bar @tabClick="tabClick"></side-bar>
    <top-bar></top-bar>
    <div class="content-div">
      <transition name="fade">
        <my-chat v-show="tabIndex === 0"></my-chat>
      </transition>
      <transition name="fade">
        <my-user v-show="tabIndex === 1"></my-user>
      </transition>
      <transition name="fade">
        <my-address v-show="tabIndex === 2"></my-address>
      </transition>
      <transition name="fade">
        <my-file v-show="tabIndex === 3"></my-file>
      </transition>
      <transition name="fade">
        <my-setting v-show="tabIndex === 4"></my-setting>
      </transition>
    </div>
  </div>
</template>

<script>
import SideBar from '../components/SideBar'
import TopBar from '../components/TopBar'
import MyChat from '../views/home/MyChat'
import MyUser from '../views/home/MyUser'
import MyAddress from '../views/home/MyAddress'
import MyFile from '../views/home/MyFile'
import MySetting from '../views/home/MySetting'

export default {
  name: 'Home',
  components: { SideBar, TopBar, MyChat, MyUser, MyAddress, MyFile, MySetting },
  data() {
    return {
      tabIndex: 0
    }
  },
  methods: {
    tabClick: function(index) {
      this.tabIndex = index
    }
  }
}
</script>

<style scoped>
.content-div {
  position: absolute;
  left: 60px;
  top: 26px;
  bottom: 0;
  right: 0;
}
</style>
